<template>
  <div>
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <div class="head">
        <div class="head_left">
          <van-image
            class="img"
            radius="10"
            mode="widthFix"
            width="100px"
            height="100px"
            :src="activityMessage.goodImage"
          ></van-image>
        </div>
        <div class="head_right">
          <div>
            {{ activityMessage.goodName }}
          </div>
          <div class="head_state" v-if="activityMessage.state == '预约中'">
            {{ activityMessage.state }}
          </div>
          <div class="head_state_out" v-else>
            {{ activityMessage.state }}
          </div>
        </div>
      </div>
      <div class="center">
        <div class="center_info">
          <div><span class="center_title">活动地点</span>{{ activityMessage.goodLocation }}</div>
          <van-divider :style="{ color: '#979797', padding: '0px', margin: '0px' }" />
          <div>
            <span class="center_title">活动时间</span>{{ activityMessage.serviceStartTime }} ~
            {{ activityMessage.serviceEndTime }}
          </div>
          <van-divider :style="{ color: '#979797', padding: '0px', margin: '0px' }" />
          <div><span class="center_title">参与人群</span>全体员工</div>
          <van-divider :style="{ color: '#979797', padding: '0px', margin: '0px' }" />
        </div>
      </div>
      <div class="foot">
        <div class="foot_content">
          <div style="font-size: 17px; margin: 10px 0 10px 0">活动介绍</div>
          <div>
            {{ activityMessage.goodDescription }}
          </div>
        </div>
      </div>
    </div>
    <div class="DI" v-if="activityMessage.state == '预约中'">
      <div class="DI_bottom" @click="BDXX">立即报名</div>
    </div>
  </div>
</template>

<script>
import moment from "moment"
import { getAccessToken } from "../../common/YYSLxx.js"
import headerXX from "../../components/title.vue"

export default {
  components: {
    headerXX
  },
  data() {
    return {
      siteData: JSON.parse(localStorage.getItem("siteData")),
      valuedate: Number(new Date()),
      dateshow: false,
      dateXX: "",
      title: "活动详情",
      activityMessage: {},
      nowTime: new Date().getTime()
    }
  },
  methods: {
    BDXX () {
      const currentTimeStamp = moment().unix()
      const min = BigInt("1" + "0".repeat(18)) // 10^18
      const max = BigInt("1" + "0".repeat(19)) // 10^19
      const randomNum = min + BigInt(Math.floor(Math.random() * Number(max - min)))
      let itemXX = {
        SBBT: "健康咨询活动",
        orderNumber: currentTimeStamp + randomNum.toString(), //预约编号
        siteId: this.siteData.id,
        goodInfo: [
          {
            id: this.activityMessage.goodId
          }
        ],
        orderProject: "健康咨询活动", // 预约项目
        orderProjectType: "1", // 0:   1:  (区分健康自测类型与其他类型)
        orderCreationTime: moment().format("YYYY-MM-DD"), // 下单时间
        estimateArrivalTime: "", // 预计上门时间
        estimateSumPrice: "", // 预估费用
        orderSubType: "", // 预约类型
        serviceDescription: this.activityMessage.goodDescription, // 服务介绍
        orderLocation: this.activityMessage.goodLocation, // 预约地址(非空展示)
        serviceTip: "", // 温馨提示(非空展示)
        goodSumPrice: "", // 总价
        serviceTitleList: [], // 服务标题
        goodList: [
          {
            goodId: this.activityMessage.goodId,
            goodName: "",
            servicePrice: "",
            serviceQty: "",
            goodCountPrice: "",
            serviceProjectName: this.activityMessage.goodName,
            serviceProjectNameTitle: "活动名称：",
            remark: this.activityMessage.goodDescription,
            remarkTitle: "活动描述：",
            serviceMessage: this.activityMessage.serviceStartTime + "~" + this.activityMessage.serviceEndTime,
            serviceMessageTitle: "活动时间："
          }
        ]
      }
      // let li = encodeURIComponent(JSON.stringify(itemXX))
      // uni.navigateTo({
      // url: `/pages/SXT/faceImg?YYXQxx=` + li
      // })
      // 绘制打印信息
      getAccessToken(itemXX, "健康咨询活动")
    }
  },
  mounted () {
    let arrayString = this.$route.query.HDXQ
    // 如果参数存在，则进行解码和解析
    if (arrayString) {
      // 解码并转换回数组
      let receivedArray = JSON.parse(decodeURIComponent(arrayString))
      this.activityMessage = receivedArray
      console.log(this.activityMessage)
    }
  }
}
</script>

<style lang="less">
.pull-refresh {
  position: relative;
}
.head {
  width: 100%;
  height: 150px;
  background: rgb(2, 117, 113);
  border-radius: 1px 1px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  .head_left {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    .img {
      position: relative;
    }
    .img::before {
      content: "";
      position: absolute;
      width: 100px;
      height: 100px;
      border-radius: 10px;
      box-shadow: 0 0 15px rgb(0, 0, 0);
    }
  }
  .head_right {
    width: 240px;
    height: 100px;
    color: #fff;
    font-size: 15px;
    letter-spacing: 2px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .head_state {
      width: 48px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      border-radius: 5px;
      background: #53af5c;
      margin-left: 10px;
    }
    .head_state_out {
      width: 48px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      border-radius: 5px;
      color: #454343;
      background: #f2f2f4;
      margin-left: 10px;
    }
  }
}
.center {
  width: 90%;
  height: 147px;
  font-size: 13px;
  background: #ffffff;
  position: absolute;
  top: 135px;
  left: 5%;
  border-radius: 10px;
  .center_info {
    margin: 0 10px 0 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .center_title {
      margin-right: 10px;
      color: #454343;
      font-weight: 600;
    }
  }
}
.foot {
  margin: 147px 5% 0 5%;
  width: 90%;
  // height: 147px;
  font-size: 13px;
  border-radius: 5px;
  background-color: #ffffff;

  .foot_content {
    padding: 10px;
    font-size: 13px;
    line-height: 15px;
    letter-spacing: 2px;
    color: #454343;
  }
}
.DI {
  width: 100%;
  text-align: center;
  font-weight: 600;
  position: fixed;
  bottom: 0;
  left: 0;
}

.DI_top {
  letter-spacing: 2px;
  color: rgb(2, 117, 113);
  margin-bottom: 5px;
  font-size: 13px;
}

.DI_bottom {
  width: 90%;
  height: 48px;
  line-height: 48px;
  background: rgb(2, 117, 113);
  color: #fff;
  border-radius: 5px;
  letter-spacing: 3px;
  font-size: 15px;
  margin: 2px auto 10px;
}
</style>
